<template>
  <div v-if="showFlag">
    <el-card style="margin-bottom:10px;" v-if="isCard">
        <div class="guide-top">
            <div class="guide-title">{{title}}</div>
            <div class="guide-close" @click="closeGuide"><i class="el-icon-close"></i></div>
        </div>
        <el-row :gutter="10">
            <el-col :span="24/stepList.length" v-for="item in stepList" v-bind:key="item.step">
                <div class="grid-content bg-purple">
                    <div class="tp-guide-circle">{{item.step}}</div>
                    <div class="grid-content-content">
                    <div class="tp-guide-header">{{item.title}}</div>
                    <div class="tp-guide-content" v-html="item.content"></div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </el-card>
    <div style="margin-bottom:10px;" v-else>
        <div class="guide-top">
            <div class="guide-title">{{title}}</div>
            <div class="guide-close" @click="closeGuide"><i class="el-icon-close"></i></div>
        </div>
        <el-row :gutter="10">
            <el-col :span="24/stepList.length" v-for="item in stepList" v-bind:key="item.step">
                <div class="grid-content bg-purple">
                    <div class="tp-guide-circle">{{item.step}}</div>
                    <div class="grid-content-content">
                    <div class="tp-guide-header">{{item.title}}</div>
                    <div class="tp-guide-content" v-html="item.content"></div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
  </div>
</template>
<script>
export default {
    name:'EtStepGuide',
    props:{
        stepList:{
            type:Array,
            default:()=>[]
        },
        isCard:{
            type:Boolean,
            default:true
        },
        title:{
            type:String,
            default:''
        },
        showFlag:{
            type:Boolean,
            default:true
        }
    },
    data(){
        return{
            // showFlag:true
        }
    },
    methods:{
        closeGuide(){
            this.showFlag = false;
        }
    }
}
</script>
<style scoped>
.guide-top{
    display: flex;
    justify-content: space-between;
}

.guide-title{
    padding:0 0 10px 0;font-size:14px;margin-bottom:10px;font-weight:600;
}

.guide-close{
    width:20px;height:20px;
    cursor: pointer;
}

.grid-content{
  background-color: #fff;
  border-top: 3px solid #5e7ce0;
  min-height:130px;
  box-shadow: 0 1px 4px 0 #0000001a;
  padding:20px;
}

.grid-content:hover{
  box-shadow: 0 4px 16px 0 #0003;
}

.tp-guide-circle{
  border: 2px solid #5e7ce0;
  height:26px;
  width: 26px;
  position:relative;
  left:2px;
  top:-35px;
  border-radius: 50%;
  background-color: #fff;
  padding: 2px;
  text-align: center;
  color:#5e7ce0;
  font-size:16px;
}

.grid-content-content{
  margin-top:-30px;
  font-size:14px;
}

.tp-guide-header{
  color:#252b3a;
  font-size:14px;
  font-weight: 600;
  line-height: 20px;
  height:20px;
}

.tp-guide-content{
  font-size:12px;
  line-height: 18px;
}
</style>